<template>
    <div class="books">
        <van-nav-bar title="系统参数" left-text="返回" left-arrow @click-left="onClickLeft" />
    
<van-form v-model="bannerArr">
<van-cell-group>
    <van-field name="uploader" label="轮播图片" style="height:100px">
  <template #input>
    <van-image   width="60"
  height="60"  v-for="item in bannerArr" :src="item"/>
  </template>
</van-field>
<van-field
  v-model="result"
  is-link
  readonly
  name="picker"
  label="自助借阅模式"
  placeholder="点击选择"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
  <van-picker
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
<van-field  label="每天押金" placeholder="请输入押金" />
<van-field  label="最大还书天数" placeholder="请输入天数" />
<van-field  label="借书码有效期（分钟）" placeholder="请输入分钟" />
<van-field
   
    rows="1"
    autosize
    label="书吧简介"
    type="textarea"
    placeholder="请输入简介"
  />
  <van-field>
    <template #button>
      
    </template>
  </van-field>
</van-cell-group>
</van-form>
<van-button type="primary" style="width:100%;" >保存</van-button>
      


    </div>
</template>

<script setup lang="ts">
import { getBannerAPI } from "@/api/goodsApi"
import { useRouter } from "vue-router";
import { reactive ,ref} from "vue"
let router = useRouter()
let bannerArr = reactive([])
const result = ref('');
const showPicker = ref(false);
const columns = reactive([
      { text: '开启', value: 'kaiqi' },
      { text: '关闭', value: 'guanbi' },
     
    ])
    const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };
getBannerAPI().then(res => {
    console.log(res.data[0].img1);

    bannerArr.push(res.data[0].img1)
    bannerArr.push(res.data[0].img2)
    bannerArr.push(res.data[0].img3)
    bannerArr.push(res.data[0].img4)

    console.log(bannerArr);

})
function onClickLeft() {
    router.back()
}
</script>

<style scoped>
.books {
    width: 100%;
    height: 100%
}

.van-nav-bar {
    background-color: #4fc08d
}

.list {}
</style>